<template>
	<view @click="isAddBudgetPopup.open()">
		<slot></slot>
	</view>
	<myPopupVue ref="isAddBudgetPopup">
		<view class="addBudgetPopup">
			<view class="popup_title">
				添加预算:
			</view>
			<view class="addBudgetPopup_form">
				<view class="addBudgetPopup_form_one">
					<view class="addClassPopup_one">
						<view class="addClassPopup_title">
							标签:
						</view>
						<view class="addClassPopup_input" @click="isTagChoose.open()"
							:class="theNewBudget.tag==''?'addClassPopup_input_placeholder':''">
							{{theNewBudget.tag!=''?theNewBudget.tag:'新增预算标签'}}
						</view>
					</view>
					<view class="addClassPopup_one">
						<view class="addClassPopup_title">
							金额:
						</view>
						<input v-model="theNewBudget.sum" class="addClassPopup_input" type="number" placeholder="新增预算金额"
							@blur="takeNumber()" />
					</view>
				</view>
			</view>
			<view class="addClassPopup_button">
				<view class="addClassPopup_button_text" @click="addNewBudget">
					确定
				</view>
			</view>
		</view>
	</myPopupVue>
	<myPopupVue ref="isTagChoose" type="bottom" :takeStyle="tagChooseStyle">
		<view class="tagChoose">
			<view class="tagChoose_top">
				<view class="popup_title oneLine">
					选择标签:
					<text class="tagChoose_top_chooseText oneLine">{{chooseTag==null?"请选择标签":chooseTag}}</text>
				</view>
				<view class="tagChoose_top_button" @click="tagChooseOver()">
					完成
				</view>
			</view>
			<scroll-view class="addClass_one_box" scroll-y>
				<view class="addClass_one">
					<view class="addClass_one_list">
						<view class="addClass_one_list_one oneLine" @click="chooseTag=item"
							:class="chooseTag==item?'addClass_one_list_one_active':''"
							v-for="(item,index) in expensesClass" :key="item">
							{{item}}
						</view>
						<!-- 填充 -->
						<view class="addClass_one_list_one" v-for="item in 5" :key="item" style="opacity: 0;">占格</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</myPopupVue>
</template>

<script setup>
	import myPopupVue from '@/components/base/myPopup.vue';
	import {
		computed,
		ref,
		defineProps
	} from 'vue'
	import {
		myShowToast
	} from "@/uitls/tool.js"
	import store from '@/store/index.js';
	const isAddBudgetPopup = ref()
	const props = defineProps({
		time: String
	})
	const theNewBudget = ref({
		tag: "",
		sum: ""
	})
	const takeNumber = () => {
		function hasMoreThanTwoDecimalPlaces(num) {
		  const numStr = num.toString();
		  const decimalIndex = numStr.indexOf('.');
		  if (decimalIndex === -1) {
		    return false; // 没有小数点，直接返回false
		  }
		  return numStr.length - decimalIndex - 1 > 2; // 计算小数点后的位数并判断是否大于2
		}
		const isToLong = (x,y) => {
			if (x.length > y) {
				return true
			}
			return false
		}
		if(hasMoreThanTwoDecimalPlaces(theNewBudget.value.sum)){
			myShowToast("小数点仅保留两位")
			theNewBudget.value.sum = parseFloat(theNewBudget.value.sum).toFixed(2) + ""
		}
		if(isToLong(theNewBudget.value.sum,10)){
			myShowToast('数字过长')
			theNewBudget.value.sum=theNewBudget.value.sum.slice(0,10)
		}
	}
	const addNewBudget = () => {
		if (theNewBudget.value.tag == "" || theNewBudget.value.sum == "") {
			myShowToast("请正确设置预算内容")
		} else if (parseFloat(theNewBudget.value.sum) <= 0) {
			myShowToast("预算金额不可小于等于零")
		} else {
			store.commit("mainData/addYusuanData", {
				...theNewBudget.value,
				time: props.time
			})
			theNewBudget.value = {
				tag: "",
				sum: ""
			}
			isAddBudgetPopup.value.close()
		}
	}
	const isTagChoose = ref()
	const tagChooseStyle = {
		borderBottomRightRadius: "0px",
		borderBottomLeftRadius: "0px",
		borderBottom:"none",
		borderLeft:"none",
		borderRight:"none",
	}
	const expensesClass = computed(() => store.state.AddClass.addClassOne[0])
	const chooseTag = ref(null)
	const tagChooseOver = () => { // 标签选择
		if (chooseTag.value == null) {
			myShowToast("请选择预算标签")
		} else {
			theNewBudget.value.tag = chooseTag.value
			chooseTag.value = null
			isTagChoose.value.close()
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.addBudgetPopup {
		padding: 1em;
		padding-top: 0;
		padding-bottom: 0.5em;
		width: $bigPopupWidth;
	}

	.addBudgetPopup {
		.addBudgetPopup_form {
			.addClassPopup_one {
				line-height: 2em;
				display: flex;
				align-items: center;

				.addClassPopup_title {
					color: $baseBlack_mid;
					margin-right: 1em;
				}

				.addClassPopup_input {
					flex: 1;
					font-size: $midFontsize;
					border-bottom: $baseBorder;
					padding: 0.1em;
					line-height: 1.5em;
				}

				.addClassPopup_input_placeholder {
					color: gray;
				}
			}
		}

		.addClassPopup_button {
			margin-top: 1em;
			color: $baseBlack_mid;
			font-weight: bold;
			display: flex;
			justify-content: flex-end;
			&_text{
				width: max-content;
			}
		}
	}

	.tagChoose {
		padding: 1em;
		padding-top: 0;
		border-radius: 0;
		height: 50vh;

		.tagChoose_top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.popup_title {
				flex: 1;
				font-size: $baseFontsize;

				.tagChoose_top_chooseText {
					font-size: $bigFontsize;
				}
			}

			&_button {
				// flex-shrink: 0;
				margin-left: 1em;
				color: $baseBlack_mid;
				font-weight: bold;
				text-align: right;
			}
		}

		.addClass_one_box {
			flex: 1;
			margin-top: 0.3em;
			max-height: 40vh;

			.addClass_one {

				.addClass_one_list {
					display: flex;
					justify-content: space-around;
					align-items: center;
					flex-wrap: wrap;

					&_one {
						margin: 0.2em;
						text-align: center;
						font-size: $bigFontsize;
						padding: 0.2em 0.5em;
						border: $baseColorBorder;
						border-radius: 0.1em;
						color: $baseBlack_mid;

						&:last-child {
							margin-right: auto;
						}

						&_active {
							background: $baseColor;
							color: $baseWhite;
						}
					}
				}
			}
		}
	}
</style>